<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品管理 - OKX 数据展示</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <style>
        body {
            background-color: #f4f7fa;
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #0c2461;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #0c2461;
            color: white;
            border-radius: 10px 10px 0 0;
            padding: 15px;
            font-weight: bold;
        }
        .btn-add {
            background-color: #2ed573;
            border-color: #2ed573;
        }
        .btn-add:hover {
            background-color: #26af5f;
            border-color: #26af5f;
        }
        .btn-edit {
            background-color: #1e90ff;
            border-color: #1e90ff;
            color: white;
        }
        .btn-edit:hover {
            background-color: #0077ea;
            border-color: #0077ea;
            color: white;
        }
        .btn-delete {
            background-color: #ff4757;
            border-color: #ff4757;
        }
        .btn-delete:hover {
            background-color: #ea4335;
            border-color: #ea4335;
        }
        .table th {
            font-weight: 600;
        }
        .badge-spot {
            background-color: #0c2461;
        }
        .badge-swap {
            background-color: #27ae60;
        }
        .badge-futures {
            background-color: #8e44ad;
        }
        .badge-inactive {
            background-color: #bdc3c7;
        }
    </style>
</head>
<body>
    <!-- 引入导航栏片段 -->
    <div th:replace="fragments/navbar :: navbar"></div>

    <div class="container">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>产品管理</span>
                <a href="/accounts/edit" class="btn btn-sm btn-add">添加产品</a>
            </div>
            <div class="card-body">
                <!-- 添加成功和错误消息显示 -->
                <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
                    <span th:text="${successMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
                    <span th:text="${errorMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>产品ID</th>
                                <th>产品名称</th>
                                <th>杠杆倍数</th>
                                <th>全仓保证金</th>
                                <th>全仓价差</th>
                                <th>全仓价差保证金</th>
                                <th>全仓止盈</th>
                                <th>面值</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${accounts.empty}">
                                <td colspan="9" class="text-center">没有产品数据</td>
                            </tr>
                            <tr th:each="account, status : ${accounts}" th:id="${'row-' + account.id}">
                                <td th:text="${account.id}">1</td>
                                <td th:text="${account.instId}">BTC-USD-SWAP</td>
                                <td th:text="${account.accountName}">比特币永续合约</td>
                                <td th:text="${account.leverage}">20</td>
                                <td th:text="${account.crossMargin}">50</td>
                                <td th:text="${account.crossPriceDiff}">0</td>
                                <td th:text="${account.crossPriceDiffMargin}">0</td>
                                <td th:text="${account.crossTakeProfit}">0</td>
                                <td th:text="${account.faceValue}">0.001</td>
                                <td>
                                    <a th:href="@{/accounts/edit(id=${account.id})}" class="btn btn-sm btn-edit">编辑</a>
                                    <button
                                        class="btn btn-sm btn-delete"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteModal"
                                        th:data-id="${account.id}"
                                        th:data-name="${account.accountName}">
                                        删除
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除产品 <span id="accountName"></span> 吗？</p>
                    <p class="text-danger">此操作不可撤销！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <form id="deleteForm" method="post">
                        <input type="hidden" name="_csrf" th:value="${_csrf.token}" />
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <footer class="container mt-5">
        <hr>
        <p class="text-center text-muted">&copy; 2023 OKX 数据展示系统</p>
    </footer>

    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script>
        // 删除确认模态框
        const deleteModal = document.getElementById('deleteModal');
        if (deleteModal) {
            deleteModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const name = button.getAttribute('data-name');

                document.getElementById('accountName').textContent = name;
                document.getElementById('deleteForm').action = '/accounts/delete/' + id;
            });
        }
    </script>
</body>
</html>
